<template>
    <div>
        <!-- 轮播图 -->
        <!-- 骨架屏 -->
        <!-- loading的值是loading的话会一直显示、要将其改成isloading、才能取到js的false值 -->
        <van-skeleton title :row="4" row-width="100%" :loading="isloading"/>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in imgList" :key="index">
                <img :src='item.imageUrl' alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 新闻列表tabs切换 -->
        <van-tabs v-model="active" @click="changCateId">
            <van-tab v-for="(item,index) in cateList" :title='item.title'>
            </van-tab>
        </van-tabs>
        <!-- 新闻列表 -->
        <van-skeleton title :row="8" row-width="100%" :loading="loadingNews"
        offset="0rem" 
        @load=""/>
        <van-list class="newsList">
            <van-card v-for="(item, index) in newsList" :desc="item.shortCut" :title="item.title"
                :thumb="img_prefix_url + item.imageUrl" :data-newsId="item._id"
                @click="goDetail(item._id)">
                >
                <template #tags>
                    <van-tag plain type="danger" :data-newsId="item._id"
                @click="typeTabsNum">热门</van-tag>
                    <van-tag plain type="danger">最新</van-tag>
                    <!-- <div>{{item.createTime}}</div> -->
                </template>
            </van-card>
        </van-list>
    </div>
</template>

<script src="./home.js">

</script>

<style lang="less" scoped>
@tabbar-height: 1rem;
.my-swipe .van-swipe-item {
    text-align: center;
    background-color: #39a9ed;

    img {
        width: 100%;
    }
}
.newsList {
    margin-top: 0.5rem;
    margin-bottom: 4rem;
}
</style>
